<template>
  <header>

    <!--Navigation-->
    <nav id="menu" class="navbar" style="margin-bottom: 0px;">
      <div class="container">

        <!--<div class="navbar-header"><span id="heading" class="visible-xs">Categories</span>
          <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
        </div>-->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <div class="el-row">
            <div class="el-col-sm-18 el-col-xs-6" style="margin-top: -5px;">
              <img class="logo"  src="https://sso.yunshanmeicai.com/images/logo.png">
              <span class="title_header">美菜直播平台</span>
            </div>

<!--            <div class="el-col-sm-10  el-col-xs-2">-->
<!--              <ul class="nav navbar-nav">-->
<!--                <li><a href="" @click = "toPath('/')"><i class="fa fa-home"></i>首页</a></li>-->
         <!--       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> 直播</a>
                 &lt;!&ndash; <div class="dropdown-menu">
                    <div class="dropdown-inner">
                      <ul class="list-unstyled">
                        <li><a href="archive.html">Login</a></li>
                        <li><a href="archive.html">Register</a></li>
                      </ul>
                    </div>
                  </div>&ndash;&gt;
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-play-circle-o"></i>视频</a>
                  <div class="dropdown-menu">
                    <div class="dropdown-inner">
                      <ul class="list-unstyled">
                        <li><a href="">Text 201</a></li>
                        <li><a href="">Text 202</a></li>
                        <li><a href="">Text 203</a></li>
                        <li><a href="">Text 204</a></li>
                        <li><a href="">Text 205</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> 分类</a>
                  <div class="dropdown-menu" style="margin-left: -203.625px;">
                    <div class="dropdown-inner">
                      <ul class="list-unstyled">
                        <li><a href="archive.html">行政</a></li>
                        <li><a href="archive.html">美菜</a></li>
                        <li><a href="archive.html">美家</a></li>
                        <li><a href="archive.html">Text 304</a></li>
                        <li><a href="archive.html">Text 305</a></li>
                      </ul>
                      <ul class="list-unstyled">
                        <li><a href="archive.html">Text 306</a></li>
                        <li><a href="archive.html">Text 307</a></li>
                        <li><a href="archive.html">Text 308</a></li>
                        <li><a href="archive.html">Text 309</a></li>
                        <li><a href="archive.html">Text 310</a></li>
                      </ul>
                      <ul class="list-unstyled">
                        <li><a href="archive.html">Text 311</a></li>
                        <li><a href="archive.html">Text 312</a></li>
                        <li><a href="archive.html#">Text 313</a></li>
                        <li><a href="archive.html#">Text 314</a></li>
                        <li><a href="archive.html">Text 315</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li><a href="archive.html"><i class="fa fa-cubes"></i> 粉丝节</a></li>
                <li><a href="contact.html"><i class="fa fa-envelope"></i>美菜联盟</a></li>-->
<!--              </ul>-->
<!--            </div>-->

            <div class="el-col-sm-6 el-col-xs-20">
              <span class="zySearch" id="zySearch"></span>
            </div>
          </div>

        </div>
      </div>
    </nav>
    <!--todo 这是滚动框，后面版本会扩展，这里先注释-->
   <!-- <div class="header-slide">
      <div id="owl-demo" class="owl-carousel">
        <div class="item">
          <div class="zoom-container">
            <div class="zoom-caption">
              <span>Video's Tag</span>
              <a href="single.html">
                <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
              </a>
              <p>Video's Name</p>
            </div>
            <img src="../../../static/images/2.jpg" />
          </div>
        </div>
        <div class="item">
          <div class="zoom-container">
            <div class="zoom-caption">
              <span>Video's Tag</span>
              <a href="single.html">
                <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
              </a>
              <p>Video's Name</p>
            </div>
            <img src="../../../static/images/3.jpg" />
          </div>
        </div>
        <div class="item">
          <div class="zoom-container">
            <div class="zoom-caption">
              <span>Video's Tag</span>
              <a href="single.html">
                <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
              </a>
              <p>Video's Name</p>
            </div>
            <img src="../../../static/images/4.jpg" />
          </div>
        </div>
        <div class="item">
          <div class="zoom-container">
            <div class="zoom-caption">
              <span>Video's Tag</span>
              <a href="single.html">
                <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
              </a>
              <p>Video's Name</p>
            </div>
            <img src="../../../static/images/5.jpg" />
          </div>
        </div>
        <div class="item">
          <div class="zoom-container">
            <div class="zoom-caption">
              <span>Video's Tag</span>
              <a href="single.html">
                <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
              </a>
              <p>Video's Name</p>
            </div>
            <img src="../../../static/images/6.jpg" />
          </div>
        </div>
        <div class="item">
          <div class="zoom-container">
            <div class="zoom-caption">
              <span>Video's Tag</span>
              <a href="single.html">
                <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
              </a>
              <p>Video's Name</p>
            </div>
            <img src="../../../static/images/7.jpg" />
          </div>
        </div>
        <div class="item">
          <div class="zoom-container">
            <div class="zoom-caption">
              <span>Video's Tag</span>
              <a href="single.html">
                <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
              </a>
              <p>Video's Name</p>
            </div>
            <img src="../../../static/images/8.jpg" />
          </div>
        </div>
        <div class="item">
          <div class="zoom-container">
            <div class="zoom-caption">
              <span>Video's Tag</span>
              <a href="single.html">
                <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
              </a>
              <p>Video's Name</p>
            </div>
            <img src="../../../static/images/9.jpg" />
          </div>
        </div>
      </div>
    </div>-->

  </header>
</template>

<script>
export default {
  name: 'header',
  data () {
    return {
    }
  },
  methods: {
    toPath (url) {
      if (url === '/') {
        this.$router.push({path: url})
      }
    }
  }
}
</script>

<style >
  .title_header {
    font-family: monospace;
    font-size: 25px;
    font-weight: bold;
    color: white;
    position: relative;
    top: 5px;
    left: 10px;
  }
  @media screen and (max-width: 1000px) {
    .title_header {
      font-size: 25px;
      font-weight: bold;
      color: white;
      position: relative;
      top: 10px;
      left: 10px;
    }
  }

  .title_search {
    font-size: 20px;
    font-weight: bold;
    color: white;
  }
  .logo{
    width: 80px;
  }

</style>
